<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<nav-Can></nav-Can>
		</div>
		<script>
			Vue.component('navCan',
			{
				template:`<div>
				<p>单价：{{num}}</p>
				<p>数量：{{ss}}</p>
				<p>总价：{{this.ss * this.num}}</p>
				<button @click="yaan()">减少数量</button>
				<button @click="ya()">减加数量</button>
				</div>`,
				methods:{
					yaan(){
						this.ss++
					},
					ya(){
						this.ss>0 ?this.ss--:0
					}
				},
				data(){
					return{
						num:10,
						ss:10
						
					}
				},
			})
			var vm=new Vue({
				el:'#app',
				data:{
					
				}
			})
		</script>
	</body>
</html>